<template>
  <div class="comment-management-container">
    <h2>评论管理</h2>
    
    <!-- 筛选区域 -->
    <div class="filter-area">
      <el-input
        v-model="searchQuery"
        placeholder="搜索评论内容或用户"
        style="width: 300px; margin-right: 10px"
        @keyup.enter.native="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
      </el-input>
    </div>
    
    <!-- 评论列表表格 -->
    <el-table 
      :data="filteredComments" 
      border 
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="id" label="评论ID" width="100"></el-table-column>
      <el-table-column prop="userId" label="用户ID" width="100"></el-table-column>
      <el-table-column prop="nickname" label="用户昵称" width="120"></el-table-column>
      <el-table-column prop="content" label="评论内容"></el-table-column>
      <el-table-column label="关联帖子" width="200">
        <template slot-scope="scope">
          <el-button 
            type="text"
            @click="viewRelatedPost(scope.row.postId)"
          >
            {{ scope.row.postTitle }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button 
            size="mini" 
            type="danger" 
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
          <el-button 
            size="mini" 
            type="warning" 
            @click="handleWarn(scope.row)"
          >
            警告
          </el-button>
          <el-button 
            size="mini" 
            :type="scope.row.userStatus === '冻结' ? 'success' : 'danger'"
            @click="handleToggleStatus(scope.row)"
          >
            {{ scope.row.userStatus === '冻结' ? '解冻' : '冻结' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalComments"
    ></el-pagination>
    
    <!-- 帖子详情对话框 -->
    <el-dialog 
      title="关联帖子详情" 
      :visible.sync="postDialogVisible" 
      width="70%"
    >
      <div v-if="currentPost" class="post-detail">
        <h3>{{ currentPost.title }}</h3>
        <div class="post-meta">
          <span>作者: {{ currentPost.author }}</span>
          <span>发布时间: {{ currentPost.createTime }}</span>
        </div>
        <div class="post-content" v-html="currentPost.content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CommentManagement',
  data() {
    return {
      loading: false,
      comments: [],
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      totalComments: 0,
      postDialogVisible: false,
      currentPost: null
    }
  },
  computed: {
    filteredComments() {
      return this.comments
        .filter(comment => {
          if (this.searchQuery && 
              !comment.content.includes(this.searchQuery) && 
              !comment.nickname.includes(this.searchQuery)) {
            return false
          }
          return true
        })
        .slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  created() {
    this.fetchComments()
  },
  methods: {
    fetchComments() {
      this.loading = true
      // 模拟API调用
      setTimeout(() => {
        this.comments = [
          {
            id: 1,
            userId: 101,
            nickname: '张三',
            content: '这个帖子对我帮助很大，谢谢分享！',
            postId: 1,
            postTitle: '关于抑郁症的自我调节方法',
            userStatus: '正常'
          },
          {
            id: 2,
            userId: 102,
            nickname: '李四',
            content: '我觉得这个观点不太正确...',
            postId: 1,
            postTitle: '关于抑郁症的自我调节方法'
          },
          // 更多模拟数据...
        ]
        this.totalComments = this.comments.length
        this.loading = false
      }, 500)
    },
    viewRelatedPost(postId) {
      // 模拟获取帖子详情
      this.currentPost = {
        id: postId,
        title: '关于抑郁症的自我调节方法',
        author: '王五',
        createTime: '2023-05-15 14:30:22',
        content: '<p>抑郁症是一种常见的精神疾病...</p>'
      }
      this.postDialogVisible = true
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchComments()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchComments()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchComments()
    },
    handleDelete(comment) {
      this.$confirm('确定要删除此评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.comments.findIndex(c => c.id === comment.id)
        this.comments.splice(index, 1)
        this.totalComments--
        this.$message.success('删除成功')
      })
    },
    handleWarn(comment) {
      this.$confirm('确定要警告此用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实际项目中这里应该调用API警告用户
        this.$message.success(`已对用户 ${comment.nickname} (ID:${comment.userId}) 发出警告`)
      })
    },
    handleToggleStatus(comment) {
      const action = comment.userStatus === '冻结' ? '解冻' : '冻结'
      this.$confirm(`确定要${action}此用户吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用API更新用户状态
        comment.userStatus = action === '冻结' ? '冻结' : '正常'
        this.$message.success(`已${action}用户 ${comment.nickname} (ID:${comment.userId})`)
        
        // 触发事件通知父组件或全局状态更新
        this.$emit('user-status-changed', {
          userId: comment.userId,
          status: comment.userStatus
        })
      })
    },
    // 修改模拟数据添加userStatus字段
    fetchComments() {
      this.loading = true
      setTimeout(() => {
        this.comments = [
          {
            id: 1,
            userId: 101,
            nickname: '张三',
            content: '这个帖子对我帮助很大，谢谢分享！',
            postId: 1,
            postTitle: '关于抑郁症的自我调节方法',
            userStatus: '正常'
          },
          {
            id: 2,
            userId: 102,
            nickname: '李四',
            content: '我觉得这个观点不太正确...',
            postId: 1,
            postTitle: '关于抑郁症的自我调节方法'
          },
          // 更多模拟数据...
        ]
        this.totalComments = this.comments.length
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style scoped>
.comment-management-container {
  padding: 20px;
}

.filter-area {
  margin-bottom: 20px;
  display: flex;
}

.post-detail h3 {
  margin-bottom: 15px;
  color: #333;
}

.post-meta {
  margin-bottom: 15px;
  color: #999;
  font-size: 14px;
}

.post-meta span {
  margin-right: 15px;
}

.post-content {
  line-height: 1.6;
  margin-bottom: 20px;
}
</style>